<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
       <!-- 头部 -->
   <div class="head">
    <div class="head_top wrapper">
      <ul>
        <li>小米网</li>|
        <li>MIUI</li>|
        <li>米聊</li>|
        <li>游戏</li>|
        <li>多看阅读</li>|
        <li>云服务</li>|
        <li>小米网移动版</li>|
        <li>问题反馈</li>|
        <li>Select Region</li>
      </ul>
    </div>
   
  </div>

  <!-- logo导航 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <img src="./images/logo.png" alt="" />

      <img src="./images/new.gif" alt="" />
    </div>

    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="#">小米手机</a></li>

        <li><a href="#">红米</a></li>

        <li><a href="#">平板</a></li>

        <li><a href="#">电视</a></li>

        <li><a href="#">盒子·影音</a></li>

        <li><a href="#">路由器</a></li>

        <li><a href="#">智能硬件</a></li>

        <li><a href="#">服务</a></li>

        <li><a href="#">社区</a></li>
      </ul>
    </div>
  </div>

  <!-- banner -->
  <div class="banner wrapper">
    <img src="./images/banner.png" alt=""></img>

    <!-- 侧导航 -->
    <div class="subnav">
        <ul>
        <li>
            <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">路由器</a><a href="#">智能硬件</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">耳机</a><a href="#">音箱</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">电池</a><a href="#">存储卡</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">保护套</a><a href="#">后盖</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">贴膜</a><a href="#">其他配件</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">米兔 </a><a href="#">服装</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        <li>
            <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a></div>
    
            <span class="iconfont icon-arrow-right-bold"></span>
    
        </li>
    
        
        </ul>
    
    </div>
  
  </div>

   <!-- 手机图片样式 -->
   <div class="recommend wrapper">
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li >
          <div class="bg">
            我就是一个空色块<br> 一言不合就这么任性
          </div>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/pro1.png" alt=""></div>
          </a>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/pro2.png" alt=""></div>

          </a>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/pro3.png" alt=""></div>
            </div>

          </a>

        </li>

        
      </ul>

    </div>

    <!-- 智能硬件样式 -->
    <div class="appliance wrapper">
        <!-- 标题 -->
        <div class="title">
        <div class="left">
            <h3>智能硬件</h3>
    
        </div>
    
        <div class="right">
            <a href="#" class="more">查看全部</a>
    
        </div>
    
        </div>
        <!-- 内容 -->
    <div class="content">
        <div class="left">
        <a href="#"><img src="./images/girl.jpg" alt=""></a>
    
        </div>
    
        <div class="right">
            <ul>
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d1.jpg" alt=""></div>         
                    <div class="txt">
                    <div class="info">
                        <strong>小米路由器3</strong>          
                        <p>四天线设计，更安全更稳定</p>          
                    </div>          
                    <p class="price"><span>149元</span></p>
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d2.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>米家 LED 智能台灯</strong>    
            
                        <p>无可视频闪，亮度色温无级调</p>
            
                    </div>
            
                    <p class="price"><span>169元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d3.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>小米净水器 厨下式</strong> 
            
                        <p>RO反渗透直出纯净水，包邮包</p>
            
                    </div>
            
                    <p class="price"><span>1999元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d4.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>小蚁智能摄像机 夜视</strong> 
            
                        <p>能看能听能说，手机远程观看</p>
            
                    </div>
            
                    <p class="price"><span>149元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d5.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>Yeelight床头灯</strong> 
            
                        <p>触摸式操作，给卧室1600万种</p>
            
                    </div>
            
                    <p class="price"><span>249元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d6.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>小米智能安防套装</strong> 
            
                        <p>智能警戒，为您的家增添一份安</p>

            
                    </div>
            
                    <p class="price"><span>169元 </span>188元</p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d7.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>米家iHealth血压计</strong>
            
                        <p>爸妈上手就会用的智能血压计</p>
            
                    </div>
            
                    <p class="price"><span>399元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
                <li>
                <a href="#">
                    <div class="pic"><img src="./images/d8.jpg" alt=""></div>
            
                    <div class="txt">
                    <div class="info">
                        <strong>小米空气净化器2</strong>   
            
                        <p>10分钟，房间空气焕然一新</p>
            
                    </div>
            
                    <p class="price"><span>699元</span></p>
            
                    </div>
            
                </a>
            
                </li>
            
            </ul>
            
    
        </div>
    
    </div>
    </div>

       <!-- 底部介绍 -->
       <div class="footer">
        <div class="wrapper">
          <footer class="menu">
            <div class="section">
              <h3>帮助中心</h3>
              <ul>
                <li>账户管理</li>
                <li>购物指南</li>
                <li>订单操作</li>
              </ul>
            </div>
            <div class="section">
              <h3>服务支持</h3>
              <ul>
                <li>售后政策</li>
                <li>自助服务</li>
                <li>相关下载</li>
              </ul>
            </div>
            <div class="section">
              <h3>线下门店</h3>
              <ul>
                <li>小米之家</li>
                <li>服务网点</li>
                <li>零售网点</li>
              </ul>
            </div>
            <div class="section">
              <h3>关于小米</h3>
              <ul>
                <li>了解小米</li>
                <li>加入小米</li>
                <li>联系我们</li>
              </ul>
            </div>
            <div class="section">
              <h3>关注我们</h3>
              <ul>
                <li>新浪微博</li>
                <li>小米部落</li>
                <li>官方微信</li>
              </ul>
            </div>
            <div class="section">
              <h3>特色服务</h3>
              <ul>
                <li>F码通道</li>
                <li>小米移动</li>
                <li>防伪查询</li>
              </ul>
            </div>
            <div class="contact-info">
              <p>400-100-5678</p>
              <p>周一至周日 8:00-18:00</p>
              <p>（仅收市话费）</p>
            </div>
          </footer>
        </div>
      </div>
      <!-- 版权 -->
       <div class="bottom-box">
        <div class="bottom wrapper">
          <!-- 左侧图标 -->
          <img class="ges" src="./images/logo.png" alt=""> 
          <!-- 右边文字 -->
          <div class="text">
            <p>小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 | 视频电话 | 小米后院 | 小米天猫店 | 小米淘宝直营店 | 小米网盟 | 问题反馈 | Select Region</p>
            <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 </p>
            <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
          </div>
        </div>

        <!-- 结尾图片 -->
          <div class="bottom-img">
            <img src="./images/bottom.png" alt="">
          </div>
      </div>
</body>
</html>